<template>
	<view class="container">
		<!-- <u-navbar leftIcon="" bgColor="#0a0816" title="我的" placeholder>
			<template slot="right">
				<image @click="hanldeMyInfo" class="setStyle" src="../../static/image/set.png"></image>
			</template>
		</u-navbar> -->
		<view class="betweenX pad-30">
			<view></view>
			<image @click="hanldeMyInfo" class="setStyle" src="../../static/image/set.png"></image>
		</view>
		<view class="user-info pad-top-60">
			<view class="user-top columnY centerY">
				<image v-if="isLogin" class="avatar" :src="info.avatar" mode="aspectFill"></image>
				<image v-else class="avatar" src="../../static/image/avatar.png" mode="aspectFill"></image>

				<view class="centerY flex-w betweenX" v-if="isLogin">
					<view class="">
						<view class="centerX mar-bottom-20">
							<view @click="hanldeRealName"
								class="centerXY auth-box pad-left-right-10 mar-top-20 shrink">
								<image v-if="authInfo.status == 1" class="auth" src="../../static/image/has-auth-no.png"
									mode=""></image>
								<image v-else class="auth" src="../../static/image/has-auth.png" mode=""></image>
								<text v-if="authInfo.status == 1" class="font-16 color-grey">未实名</text>
								<text v-if="authInfo.status == 2" class="font-16 color-theme">已实名</text>
								<text v-if="authInfo.status == 3" class="font-16 color-grey">实名失败</text>
							</view>
						</view>


						<view class="multi1 color-white font-36 text-center">{{info.nickname}}</view>
						<view class="color-grey text-center mar-top-10 font-28">{{info.tel}}</view>
					</view>
					<!-- <view @click="hanldeMyInfo"
						class="centerXY set pad-left-right-10 pad-top-bottom-6 shrink mar-left-10 color-white">
						<text class="font-24 mar-right-5">个人设置</text>
						<u-icon size="14" color="#ffffff" name="arrow-right"></u-icon>
					</view> -->
				</view>
				<view v-else @click="hanldeLogin" class="mar-top-20 login-right centerY flex-w font-30">请登录</view>
			</view>

		</view>
		<view class="block betweenX mar-top-30 color-white pad-30">
			<view class="centerXY block-box" @click="hanldeWallet">
				<image class="block-icon" src="../../static/icon/my-collection.png" mode=""></image>
				<text class="mar-left-24 font-30">我的钱包</text>
			</view>
			<view class="centerXY block-box" @click="hanldeShare">
				<image class="block-icon" src="../../static/icon/my-wallet.png" mode=""></image>
				<text class="mar-left-24 font-30">邀请好友</text>
			</view>
		</view>


		<view class="pad-left-right-30">
			<view class="bg-theme1 mar-top-60 pad-30 radius24">
				<u-grid :col="4">
					<u-grid-item v-for="(item,index) in cellList" :key="index" @click="hanldeCell(item.url)">
						<image class="grid-size" :src="item.icon" mode=""></image>
						<view class="font-26 mar-top-20 color-white"> {{ item.title}}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

		<view class="bg-black mar-top-40 myColl">
			<u-sticky :offset-top="offsetTop" h5-nav-height="44" bgColor="transparent">
				<u-tabs :current="current" @click="handelTypeTab" :itemStyle="{ height: '98rpx', padding: '0'}"
					:activeStyle="{ color: '#DD67FF',fontSize: '32rpx' }"
					:inactiveStyle="{ fontSize: '32rpx',color: '#FFFFFF'}" :scrollable="false" :lineWidth="24"
					:duration="200" lineColor="#DD67FF" :list="tabList"></u-tabs>
			</u-sticky>
			<!-- 列表 -->
			<my-goods :listType="listType" :list="list" @click="hanldeGoodsInfo"></my-goods>
			<u-empty v-if="list.length == 0" text=" " icon="../../static/image/empty.png"></u-empty>
			<u-loadmore v-if="list.length > 0" :status="pageStatus" color="#8C9FAE" iconColor="#8C9FAE" />
		</view>

		<my-popup content="您还未登录,是否立即登录？" :show="isPopup" @cancel="isPopup = false" @confirm="hanldeLogin"></my-popup>

		<!-- 弹框 -->
		<u-popup :show="goodsShow" round="12" bgColor="#36313B" closeable @close="goodsShow = false">
			<view class="pad-left-right-32 mar-top-bottom-48">
				<view class="goods-cover centerY betweenX">
					<image class="radius24" v-if="goodInfo.goods_info"
						:src="goodInfo.goods_info.cover + '?image_process=resize,l_350'" mode="aspectFill"></image>
					<view class="">
						<view v-if="goodInfo.goods_info" class="font-32 color-white font-w-600">{{goodInfo.goods_info.name}}</view>
						<view class="font-28 color-grey mar-top-10">共{{goodInfo.cnt}}个</view>
					</view>
				</view>


				<view class="centerY betweenX mar-top-bottom-20 font-24 color-grey">
					<view></view>
					<view>平均价：¥ {{avg_last_price}}</view>
				</view>

				<view class="goods-list-box">
					<view class="goods-list rowW gap30">
						<view v-for="item in codeList" class="list centerXY radius16 bg-theme1"
							@click="hanldeCollectionDetails(item)">
							<view v-if="item.lock_scene =='market'">
								<view class="bg-theme color-white font-20 pad-left-right-24 pad-top-bottom-8 status">寄售中
								</view>
							</view>
							<template v-else>
								<view v-if="item.from_scene == 'goods_sale'"
									class="status color-white font-20 pad-left-right-24 pad-top-bottom-8 status">发售
								</view>
								<view v-if="item.from_scene == 'airdrop'"
									class="status color-white font-20 pad-left-right-24 pad-top-bottom-8 status">空投
								</view>
								<view v-if="item.from_scene == 'market'"
									class="status color-white font-20 pad-left-right-24 pad-top-bottom-8 status">寄售市场
								</view>
								<view v-if="item.from_scene == 'compose'"
									class="status color-white font-20 pad-left-right-24 pad-top-bottom-8 status">合成
								</view>
								<view v-if="item.from_scene == 'draw'"
									class="status color-white font-20 pad-left-right-24 pad-top-bottom-8 status">抽奖
								</view>
								<view v-if="item.from_scene == 'blind_box'"
									class="status color-white font-20 pad-left-right-24 pad-top-bottom-8 status">盲盒
								</view>
							</template>
							<view v-if="item.lock_scene =='market'" class="centerY color-white">
								<view class="font-16">￥</view>
								<view class="font-32 font-w-600">{{item.market_info.price}}</view>
							</view>
							<view v-else class="centerY color-white">
								<view class="font-16">￥</view>
								<view class="font-32 font-w-600">{{item.last_price}}</view>
							</view>
							<view class="color-grey font-24">#{{item.code}}</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// 接口地址
	import {
		baseInfo,
		realNameAuthInfo,
		goodsGroupPageList,
		myMarketList,
		myGoodsCodeList,
	} from '@/config/api.js'
	export default {
		data() {
			return {
				current: 0,
				offsetTop: 0,
				// 信息
				info: {},
				// 去登录状态
				isPopup: false,
				isLogin: uni.getStorageSync('token'),
				// cell
				cellList: [{
						title: '我的订单',
						icon: '../../static/icon/my-order.png',
						url: "/pages/goods/orderList",
					},
					{
						title: '我的寄售',
						icon: '../../static/icon/my-js.png',
						url: "/pages/my/market",
					},
					{
						title: '活动记录',
						icon: '../../static/icon/my-record.png',
						url: "/pages/my/activityRecord",
					},
					// {
					// 	title: '转增记录',
					// 	icon: '../../static/icon/gift.png',
					// 	url: "",
					// },
					// {
					// 	title: '区块链信息查询',
					// 	icon: '../../static/icon/block.png',
					// 	url: "",
					// },
					{
						title: '账号与安全',
						icon: '../../static/icon/my-account.png',
						url: "/pages/my/info",
					},
					{
						title: '隐私设置',
						icon: '../../static/icon/my-ys.png',
						url: "",
					},
					// {
					// 	title: '收货地址',
					// 	icon: '../../static/icon/my-addr.png',
					// 	url: "/pages/address/list",
					// },
					{
						title: '关于我们',
						icon: '../../static/icon/my-about.png',
						url: "/pages/my/about",
					},
					{
						title: '我的客服',
						icon: '../../static/icon/my-service.png',
						url: "/pages/my/service",
					},
					// {
					// 	title: '分享邀请',
					// 	icon: '../../static/icon/my-share.png',
					// 	url: "/pages/invitation/invitation",
					// },
				],
				// 实名认证
				authInfo: {},
				// 右边 icon 样式
				rightIconStyle: {
					fontSize: '20rpx'
				},
				// icon 样式
				iconStyle: {
					width: '48rpx',
					height: '48rpx',
					marginRight: '20rpx'
				},
				// 藏品筛选
				tabList: [{
						name: '数字藏品',
						id: 1
					},
					{
						name: '数字盲盒',
						id: 2
					},
					{
						name: '我的寄售',
						id: [10]
					},
					{
						name: '已卖出',
						id: [30]
					},
				],
				// 分页
				ps: 20,
				page: 1,
				pageData: {},
				// 藏品折叠列表
				list: [],
				// 列表样式状态
				listType: 1,
				// codeList
				goodsShow: false,
				// 编号列表
				codeList: [],
				// 单个藏品
				goodInfo: {},
				offsetTop: 0,
				type: 1,
				// 选中默认的 tab
				current: 0,
				// 拼接价格
				avg_last_price: 0
			}
		},
		watch: {
			isLogin(newVal, oleval) {
				this.isLogin = uni.getStorageSync('token');
			}
		},
		onLoad() {},
		onShow() {
			this.isLogin = uni.getStorageSync('token');
			// 判断是否登录
			if (uni.getStorageSync('token')) {
				this.getBaseInfo();
			}
			this.page = 1
			this.list = [];
			this.type = 1;
			this.listType = 1;
			this.current = Number(0);
			uni.showLoading({
				title: '加载中...',
				mask: true,
			})
			this.getDataList();
		},
		methods: {
			// 寄售
			hanldeCollectionDetails(item) {
				this.goodsShow = false;
				// 盲盒
				if (item.goods_info.type == 2) {
					uni.navigateTo({
						url: '/pages/my/collectionBoxDetails?code_id=' + item.id
					})
				} else {
					uni.navigateTo({
						url: '/pages/my/collectionDetails?code_id=' + item.id
					})
				}
			},
			// 打开弹框
			hanldeGoodsInfo(item) {
				if (this.listType == 2) {
					if (this.type[0] == 10) {
						let data = {
							id: item.goods_code_id,
							goods_info: item.goods_info
						}
						this.hanldeCollectionDetails(data);
					}
					return
				}
				this.goodInfo = item;
				myGoodsCodeList({
					goods_ids: [item.goods_id]
				}).then(res => {
					this.avg_last_price = res.data.avg_last_price;
					this.codeList = res.data.lists;
				})
				this.goodsShow = true;
			},
			// 切换盲盒还是 藏品
			handelTypeTab(e) {
				if (this.current == e.index) {
					return false
				}

				uni.showLoading({
					title: '加载中...',
					mask: true,
				})

				this.current = e.index;
				this.list = [];
				this.page = 1;
				this.type = e.id;
				if (e.id == 1 || e.id == 2) {
					this.listType = 1;
					this.getDataList();
				} else {
					this.listType = 2;
					this.getMarketList();
				}
			},
			// 我的寄售
			getMarketList() {
				this.pageStatus = 'loading';
				let data = {
					ps: this.ps,
					page: this.page,
					status_arr: this.type
				}
				myMarketList(data).then(res => {
					this.pageStatus = 'loadmore';
					let {
						data
					} = res;
					this.pageData = data;
					this.page = data.current_page + 1;
					this.list = this.list.concat(data.data);
					// 没有更多了
					if (data.next_page_url == null) {
						this.pageStatus = 'nomore'
					}
					uni.hideLoading();
				})
			},
			// 获取藏品折叠列表
			getDataList() {
				let data = {
					ps: this.ps,
					page: this.page,
					type: this.type
				}
				this.pageStatus = 'loading';
				goodsGroupPageList(data).then(res => {
					let {
						data
					} = res;

					uni.hideLoading();
					this.pageData = data;
					this.page = data.current_page + 1;
					this.list = this.list.concat(data.data);
					this.pageStatus = 'loadmore';
					// 没有更多了
					if (data.next_page_url == null) {
						this.pageStatus = 'nomore'
					}
				})
			},
			setOffestTop() {
				// #ifdef APP-PLUS
				let systemInfo = uni.getSystemInfoSync()
				let topPx = systemInfo.statusBarHeight // 顶部状态栏+沉浸式自定义顶部导航
				this.offsetTop = topPx / (uni.upx2px(topPx) / topPx) + 5 // px转rpx
				// #endif
			},
			// 跳转邀请
			hanldeShare() {
				uni.navigateTo({
					url: '/pages/invitation/invitation'
				})
			},
			// 返回实体商城
			hanldeReturn() {
				uni.switchTab({
					url: uni.getStorageSync('path')
				})
			},
			// 跳转去实名认知
			hanldeRealName() {
				uni.navigateTo({
					url: '/pages/my/certification'
				})
			},
			// 去登录
			hanldeLogin() {
				this.isPopup = false;
				uni.navigateTo({
					url: '/pages/my/login'
				})
			},
			// 我的藏品
			hanldemyCollection() {
				if (uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/my/myCollection'
					})
				} else {
					this.isPopup = true;
				}
			},
			// 跳转我的钱包
			hanldeWallet() {
				if (uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/my/wallet'
					})
				} else {
					this.isPopup = true;
				}
			},
			// 跳转个人设置
			hanldeMyInfo() {
				uni.navigateTo({
					url: '/pages/my/info'
				})
			},
			// 跳转cell页面
			hanldeCell(url) {
				if (uni.getStorageSync('token')) {
					if (url) {
						uni.navigateTo({
							url: url
						})
					} else {
						uni.$u.toast('暂未开放')
					}
				} else {
					this.isPopup = true;
				}
			},
			// 获取用户信息
			getBaseInfo() {
				baseInfo().then(res => {
					this.info = res.data.info;
				})

				// 权限信息
				realNameAuthInfo().then(res => {
					this.authInfo = res.data.info;
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.grid-size {
		display: block;
		width: 80rpx;
		height: 80rpx;
	}

	.setStyle {
		display: block;
		width: 42rpx;
		height: 42rpx;
	}

	.u-grid-item {
		padding: 30rpx 0;
		box-sizing: border-box;
	}

	.container {
		    padding-top: 0px;
		    box-sizing: border-box;
		    background: url('/static/image/login-bg.png') no-repeat;
		    background-size: 100% 100%;
		    height: 100vh;

		::v-deep .u-navbar__content {
			background-image: url('../../static/image/login-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
			color: #fff;
		}

	}

	.user-info {
		.avatar {
			display: block;
			width: 180rpx;
			height: 180rpx;
			border-radius: 50%;
			// border: 2rpx solid white;
		}

		.login-right {
			height: 128rpx;
			color: $uni-white;
		}

		.copy {
			display: block;
			width: 32rpx;
			height: 32rpx;
		}

		.set {
			border: 2rpx solid rgba(0, 0, 0, .3);
			border-radius: 64rpx;
		}

		.auth-box {
			background: rgba(89, 142, 255, .2);
			border-radius: 32rpx;

			.auth {
				display: block;
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.block-box {
		width: 328rpx;
		height: 104rpx;
		border-radius: 24rpx;
		position: relative;
		z-index: 1;

		.block-icon {
			display: block;
			width: 48rpx;
			height: 48rpx;
		}

	}

	.block-box::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 24rpx;
		background: $uni-bg-theme1;
		// filter: blur(5rpx);
		z-index: -1;
	}

	.goods-list-box {
		height: 800rpx;
		overflow: hidden;
		overflow-y: scroll;
	}

	.myColl {
		border-radius: 50rpx 50rpx 0 0;
		padding-bottom: 100rpx;
		border-top: 2rpx solid #F70FFF;
	}
	
	.goods-cover {
		image {
			display: block;
			width: 160rpx;
			height: 160rpx;
		}
	}

	.goods-list {

		.list {
			width: 328rpx;
			height: 140rpx;
			position: relative;
			overflow: hidden;
			flex-direction: column;
			padding-top: 24rpx;
			box-sizing: border-box;

			.status {
				position: absolute;
				right: 0rpx;
				background-color: rgb(119, 162, 255);
				top: 0rpx;
				border-radius: 0 0 0 24rpx;
			}

		}
	}
</style>